<template>
	<view class="order-container" :class="themeStyle">
		<mescroll-uni ref="mescroll" @getData="getListData">
			<block slot="list">
				<block v-if="orderList.length">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="detail(orderItem)">
						<view class="order-header">
							<view>
								<text class="ns-text-color-gray ns-font-size-sm">{{ orderItem.order_no }}</text>
							</view>
							<view class="align-right">
								<text class="ns-text-color ns-font-size-sm">{{ orderItem.order_status == 0 ? '待支付' : (orderItem.order_status == 1 ? '已完成' : (orderItem.order_status == -1 ? '已关闭' : '')) }}</text>
							</view>
						</view>
						<view class="order-body">
							<view class="goods-wrap">
								<block v-if="orderItem.type==1">
									<view class="goods-img" v-if="orderItem.exchange_image">
										<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex,orderItem.type)" mode="aspectFill" :lazy-load="true"></image>
									</view>
									<view class="goods-img" v-else>
										<image :src="$util.img('upload/uniapp/point/gift.png')" mode="aspectFill" :lazy-load="true"></image>
									</view>
								</block>
								<block v-if="orderItem.type==2">
									<view class="goods-img" v-if="orderItem.exchange_image">
										<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex,orderItem.type)" mode="aspectFill" :lazy-load="true"></image>
									</view>
									<view class="goods-img" v-else>
										<image :src="$util.img('upload/uniapp/point/coupon.png')" mode="aspectFill" :lazy-load="true"></image>
									</view>
								</block>
								<block v-if="orderItem.type==3">
									<view class="goods-img" v-if="orderItem.exchange_image">
										<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex,orderItem.type)" mode="aspectFill" :lazy-load="true"></image>
									</view>
									<view class="goods-img" v-else>
										<image :src="$util.img('upload/uniapp/point/hongbao.png')" mode="aspectFill" :lazy-load="true"></image>
									</view>
								</block>
							<!-- 	<view class="goods-img">
									<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
								</view> -->
								<view class="goods-info">
									<view class="goods-name">{{ orderItem.exchange_name }}</view>
									<view class="goods-sub-section">
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ orderItem.num }}
											</text>
										</view>
									</view>
								</view>
								<view class="goods-point">
									<view class="goods-sub-section">
										<view class="total">
											<text>
												{{ orderItem.point }}
												<text class="ns-font-size-sm">{{ $lang('point') }}</text>
												<text v-if="orderItem.price>0">+￥{{ orderItem.price }}</text>
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer" v-if="orderItem.order_status==0 && orderItem.type==1">
							<view class="order-opection" @click.stop="orderClose(orderItem.order_id,orderIndex)">
								<view class="order-box-btn">关闭</view>
							</view>
							<view class="order-opection" @click.stop="orderPay(orderItem.out_trade_no)">
								<view class="order-box-btn ns-border-color ns-text-color">支付</view>
							</view>
						</view>
						
					</view>
					
				</block>
				<block v-if="showEmpty&&!orderList.length">
					<view>
						<ns-empty :isIndex="!1" :text="$lang('emptyTips')"></ns-empty>
					</view>
				</block>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [],
			showEmpty:false
		};
	},
	onLoad() {},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		if (this.$refs.mescroll) this.$refs.mescroll.refresh();

		if (!uni.getStorageSync('token')) {
			this.$util.redirectTo('/pages/login/login/login', { back: '/promotionpages/point/order_list/order_list' });
		}
	},
	computed:{
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle
		}
	},
	methods: {
		getListData(mescroll) {
			this.showEmpty=false;
			this.$api.sendRequest({
				url: '/pointexchange/api/order/page',
				data: {
					page: mescroll.num,
					page_size: mescroll.size
				},
				success: res => {
					if(res.code==-1&&res.error_code=='TOKEN_ERROR'){
						this.$util.showToast({'title':'登录失败'});
						let pageRouter=getCurrentPages();
						let datapage=pageRouter[pageRouter.length-1].options;
						let back=pageRouter[pageRouter.length-1].route;
						datapage.back=back;
						setTimeout(()=>{
							this.$util.redirectTo('/pages/login/login/login', datapage);
						},1500)
						return;
					}
					
					this.showEmpty=true;
					let newArr = [];
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({ title: msg });
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
					this.orderList = this.orderList.concat(newArr); //追加新数据
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		detail(item) {
			if (item.type == 1) {
			}
		},
		orderClose(order_id,index){
			uni.showModal({
				title: '提示',
				content: '确定关闭此次兑换？',
				success: (res)=>{
					if (res.confirm) {
						this.$api.sendRequest({
							url: '/pointexchange/api/order/close',
							data: {
								order_id:order_id
							},
							success: res => {
								console.log(res);
								if(res.code>=0){
									this.orderList[index].order_status=-1;
									this.$util.showToast({ title: '关闭成功' });
									this.$forceUpdate();
								}
							}
						});
					}
				}
			});
			
		},
		orderPay(e){
			this.$util.redirectTo('/pages/pay/index/index',{code:e,back:'/promotionpages/point/order_list/order_list'})
		},
		imageError(index,type) {
			let imageUrl=''
			if(type==1){
				imageUrl=this.$util.img('upload/uniapp/point/gift.png')
			}else if(type==2){
				imageUrl=this.$util.img('upload/uniapp/point/coupon.png')
			}else if(type==3){
				imageUrl=this.$util.img('upload/uniapp/point/hongbao.png')
			}
			
			this.orderList[index].exchange_image = imageUrl;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
.order-container {
	width: 100vw;
	height: 100vh;
}
.align-right {
	text-align: right;
}
.order-item {
	margin: $ns-margin;
	padding: $ns-padding;
	border-radius: $ns-border-radius;
	background: #fff;
	position: relative;

	.order-header {
		display: flex;
		align-items: center;
		position: relative;

		& > view {
			flex: 1;
		}
	}

	.order-body {
		.goods-wrap {
			margin-top:  $ns-margin;
			margin-bottom: $ns-margin;
			padding-bottom: $ns-padding;
			border-top: 1px solid #f1f1f1;
			display: flex;
			position: relative;
			
			&:last-of-type {
				margin-bottom: 0;
			}

			.goods-img {
				width: 96rpx;
				height: 96rpx;
				padding: $ns-margin 0 0 0;
				margin-right: $ns-margin;

				image {
					width: 100%;
					height: 100%;
					border-radius: $ns-border-radius;
				}
			}

			.goods-info {
				flex: 1;
				position: relative;
				padding: $ns-padding 0 0 0;
				max-width: calc(100% - 116rpx);

				.goods-name {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					line-height: 1.5;
					font-size: $ns-font-size-sm;
					height:72rpx
				}
				
				.goods-sub-section {
					width: 100%;
					line-height: 1.3;
					display: flex;

					.goods-price {
						font-weight: 700;
						font-size: 15px;
					}
					.total{
						text-align: right;
					}
					.unit {
						font-weight: normal;
						font-size: 24rpx;
						margin-right: 2rpx;
					}

					view {
						flex: 1;
						line-height: 1.3;
						&:last-of-type {
							// text-align: right;

							.iconfont {
								line-height: 1;
								font-size: 26rpx;
							}
						}
					}
				}

				.goods-operation {
					text-align: right;
					padding-top: $ns-padding;

					.operation-btn {
						line-height: 1;
						padding: 14rpx $ns-padding;
						color: #333;
						display: inline-block;
						border-radius: 28rpx;
						background: #fff;
						border: 0.5px solid #999;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
			.goods-point{
				align-self: center;
				margin-left: 20rpx;
			}
		}
	}

	.order-footer {
		border-top: 1px solid #F1F1F1;
		text-align: right;
		padding-top: 20rpx;
		.order-base-info {
			display: flex;

			.total {
				text-align: right;
				flex: 1;

				& > text {
					line-height: 1;
					margin-left: 10rpx;
				}
			}
		}
		
	
		.order-opection{
			display: inline-block;
		}
		.operation-btn {
			line-height: 1;
			padding: 14rpx 20rpx;
			color: #333;
			display: inline-block;
			border-radius: 28rpx;
			background: #fff;
			border: 0.5px solid #999;
			font-size: $ns-font-size-base;
			margin-left: 10rpx;
		}
		.order-operation {
			text-align: right;
			padding-top: $ns-padding;

			.operation-btn {
				line-height: 1;
				padding: $ns-padding 26rpx;
				color: #333;
				display: inline-block;
				border-radius: 32rpx;
				background: #fff;
				border: 0.5px solid #999;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.empty {
	padding-top: 200rpx;
	text-align: center;

	.empty-image {
		width: 180rpx;
		height: 180rpx;
	}
}
</style>
